<script setup>
	import { onLoad } from '@dcloudio/uni-app'
	import { ref } from 'vue'
	import { useUserStore } from '@/store/user'
	import { getFutureDate } from '@/utils/common'
	import { getAddressChildren } from '@/api/login'
	import { getDictType } from '@/api/report'
	
	const user = useUserStore()
	const loading = ref(false)
	const uForm = ref(null)
	const form = ref({
		sponsorName: user.nickname,
		sponsorPhone: user.phone,
		undertakerName: undefined,
		undertakerPhone: undefined,
		district: undefined,
		street: undefined,
		village: undefined,
		address: undefined,
		startTime: getFutureDate(0, '{y}-{m}-{d}'),
		days: 1,
		applyType: undefined,
		peopleNumber: undefined
	})
	const rules = ref({
		sponsorName: [
			{required: true, message: '请输入举办人姓名', trigger: 'blur'}
		],
		sponsorPhone: [
			{required: true, message: '请输入举办人电话', trigger: 'blur'},
			{
				validator: (rule, value, callback) => {
					return uni.$uv.test.mobile(value)
				},
				message: '电话格式错误',
				trigger: 'blur'
			}
		],
		undertakerName: [
			{required: true, message: '请输入承办人姓名', trigger: 'blur'}
		],
		undertakerPhone: [
			{required: true, message: '请输入承办人电话', trigger: 'blur'},
			{
				validator: (rule, value, callback) => {
					return uni.$uv.test.mobile(value)
				},
				message: '电话格式错误',
				trigger: 'blur'
			}
		],
		district: [
			{type: 'number', required: true, message: '请选择县/区', trigger: 'change'}
		],
		street: [
			{type: 'number', required: true, message: '请选择街道', trigger: 'change'}
		],
		village: [
			{type: 'number', required: true, message: '请选择村社', trigger: 'change'}
		],
		address: [
			{required: true, message: '请输入详细地址', trigger: 'blur'}
		],
		startTime: [
			{required: true, message: '请选择办宴时间', trigger: ['blur', 'change']}
		],
		days: [
			{type: 'number', required: true, message: '请选择办宴天数', trigger: ['blur', 'change']}
		],
		applyType: [
			{type: 'number', required: true, message: '请选择办宴类型', trigger: 'change'}
		],
		peopleNumber: [
			{type: 'number', required: true, message: '请输入聚餐人数', trigger: 'blur'}
		]
	})
	const districtList = ref([])
	const streetList = ref([])
	const villageList = ref([])
	const startTime = getFutureDate(0, '{y}-{m}-{d}')
	const typeList = ref([])
	
	function handleAddress(areaId) {
		loading.value = true
		getAddressChildren({parentId: areaId}).then(res => {
			loading.value = false
			districtList.value = res.result || []
			streetList.value = []
			villageList.value = []
			let curDistrict = districtList.value.findIndex(item => item.areaId === user.addressIds[2])
			if(curDistrict != -1) {
				form.value.district = curDistrict
				districtChange({detail: {value: curDistrict}})
			}
			form.value.street = undefined
			form.value.village = undefined
			uForm.value.clearValidate('district')
			uForm.value.clearValidate('street')
			uForm.value.clearValidate('village')
		}).catch(() => loading.value = false)
	}
	function handleType() {
		getDictType('apply_banquets_types').then(res => {
			typeList.value = res.result || []
		})
	}
	function districtChange(e) {
		let index = e.detail.value
		if(index === undefined) return
		loading.value = true
		getAddressChildren({parentId: districtList.value[index].areaId}).then(res => {
			loading.value = false
			streetList.value = res.result || []
			villageList.value = []
			form.value.district = index
			form.value.street = undefined
			form.value.village = undefined
			uForm.value.validateField('district')
			uForm.value.clearValidate('street')
			uForm.value.clearValidate('village')
		}).catch(() => loading.value = false)
	}
	function streetChange(e) {
		let index = e.detail.value
		if(index === undefined) return
		loading.value = true
		getAddressChildren({parentId: streetList.value[index].areaId}).then(res => {
			loading.value = false
			villageList.value = res.result || []
			form.value.street = index
			form.value.village = undefined
			uForm.value.validateField('street')
			uForm.value.clearValidate('village')
		}).catch(() => loading.value = false)
	}
	function villageChange(e) {
		let index = e.detail.value
		if(index === undefined) return
		form.value.village = index
		uForm.value.validateField('village')
	}
	function dateChange(e) {
		let time = e.detail.value
		form.value.startTime = time
	}
	function typeChange(e) {
		let index = e.detail.value
		if(index === undefined) return
		form.value.applyType = index
		uForm.value.validateField('applyType')
	}
	function next() {
		uForm.value.validate().then(() => {
			let params = uni.$uv.deepClone(form.value)
			params.areaId = villageList.value[form.value.village].areaId
			params.applyType = typeList.value[form.value.applyType].value
			delete params.district
			delete params.street
			delete params.village
			uni.navigateTo({
				url: '/pages/Organizers/declaration/banquet/declareHelper',
				success: (res) => {
					res.eventChannel.emit('info', params)
				}
			})
		})
	}
	
	onLoad(() => {
		handleAddress(user.addressIds[1])
		handleType()
	})
</script>

<template>
	<view :class="['app-container', user.theme]">
		<view class="steps-box">
			<view class="steps-item">
				<view class="item-img active">
					<uv-icon name="/static/images/declare/base_.png" :size="user.theme? 40 : 32"></uv-icon>
				</view>
				<text>基础信息</text>
			</view>
			<view class="steps-line"></view>
			<view class="steps-item">
				<view class="item-img">
					<uv-icon name="/static/images/declare/helper.png" :size="user.theme? 40 : 32"></uv-icon>
				</view>
				<text>帮厨信息</text>
			</view>
			<view class="steps-line"></view>
			<view class="steps-item">
				<view class="item-img">
					<uv-icon name="/static/images/declare/other.png" :size="user.theme? 40 : 32"></uv-icon>
				</view>
				<text>其他信息</text>
			</view>
		</view>
		<uv-form :model="form" :rules="rules" ref="uForm" labelWidth="auto">
			<view class="form-box">
				<uv-form-item label="举办人姓名" prop="sponsorName" required borderBottom>
					<uv-input v-model="form.sponsorName" placeholder="请输入举办人姓名" border="none" inputAlign="right" maxlength="32" clearable />
				</uv-form-item>
				<uv-form-item label="举办人电话 " prop="sponsorPhone" required borderBottom>
					<uv-input type="tel" v-model="form.sponsorPhone" placeholder="请输入举办人电话" border="none" inputAlign="right" maxlength="11" clearable />
				</uv-form-item>
				<uv-form-item label="承办人姓名" prop="undertakerName" required borderBottom>
					<uv-input v-model="form.undertakerName" placeholder="请输入承办人姓名" border="none" inputAlign="right" maxlength="32" clearable />
				</uv-form-item>
				<uv-form-item label="承办人电话" prop="undertakerPhone" required>
					<uv-input type="tel" v-model="form.undertakerPhone" placeholder="请输入承办人电话" border="none" inputAlign="right" maxlength="11" 
						clearable />
				</uv-form-item>
			</view>
			<view class="form-box">
				<uv-form-item label="县/区" prop="district" required borderBottom>
					<picker @change="districtChange" :value="form.district" :range="districtList" range-key="areaName">
						<view class="custom-content">
							<text :class="form.district === undefined? 'text-no' : ''">
								{{form.district === undefined? '请选择县/区' : districtList[form.district].areaName}}
							</text>
							<uv-icon name="arrow-right" color="#54504D" size="30" />
						</view>
					</picker>
				</uv-form-item>
				<uv-form-item label="乡镇（街道）" prop="street" required borderBottom>
					<picker @change="streetChange" :value="form.street" :range="streetList" range-key="areaName">
						<view class="custom-content">
							<text :class="form.street === undefined? 'text-no' : ''">
								{{form.street === undefined? '请选择街道' : streetList[form.street].areaName}}
							</text>
							<uv-icon name="arrow-right" color="#54504D" size="30" />
						</view>
					</picker>
				</uv-form-item>
				<uv-form-item label="村社" prop="village" required borderBottom>
					<picker @change="villageChange" :value="form.village" :range="villageList" range-key="areaName">
						<view class="custom-content">
							<text :class="form.village === undefined? 'text-no' : ''">
								{{form.village === undefined? '请选择村社' : villageList[form.village].areaName}}
							</text>
							<uv-icon name="arrow-right" color="#54504D" size="30" />
						</view>
					</picker>
				</uv-form-item>
				<uv-form-item label="详细地址" prop="address" required>
					<uv-input v-model="form.address" placeholder="小区 单元 门牌号等" border="none" inputAlign="right" maxlength="50" clearable />
				</uv-form-item>
			</view>
			<view class="form-box">
				<uv-form-item label="办宴时间" prop="startTime" required borderBottom>
					<picker @change="dateChange" mode="date" :start="startTime" :value="form.startTime">
						<view class="custom-content">
							<text :class="form.startTime? '' : 'text-no'">{{form.startTime? form.startTime : '请选择办宴时间'}}</text>
							<uv-icon name="arrow-right" color="#54504D" size="30" />
						</view>
					</picker>
				</uv-form-item>
				<uv-form-item label="办宴天数" prop="days" required borderBottom>
					<view class="custom-content">
						<uv-number-box v-model="form.days" inputWidth="94" integer bgColor="#FFFFFF">
							<template v-slot:minus>
								<view class="operate-box">
									<uv-icon name="minus" color="#999999" size="24" bold></uv-icon>
								</view>
							</template>
							<template v-slot:plus>
								<view class="operate-box plus">
									<uv-icon name="plus" color="#FFFFFF" size="24" bold></uv-icon>
								</view>
							</template>
						</uv-number-box>
					</view>
				</uv-form-item>
				<uv-form-item label="办宴类型" prop="applyType" required borderBottom>
					<picker @change="typeChange" :value="form.applyType" :range="typeList" range-key="dictLabel">
						<view class="custom-content">
							<text :class="form.applyType === undefined? 'text-no' : ''">
								{{form.applyType === undefined? '请选择办宴类型' : typeList[form.applyType].dictLabel}}
							</text>
							<uv-icon name="arrow-right" color="#54504D" size="30" />
						</view>
					</picker>
				</uv-form-item>
				<uv-form-item label="聚餐人数 " prop="peopleNumber" required>
					<uv-input type="number" v-model="form.peopleNumber" placeholder="请输入聚餐人数" border="none" inputAlign="right" maxlength="11" clearable />
				</uv-form-item>
			</view>
		</uv-form>
		<view class="form-bottom">
			<uv-button type="primary" shape="circle" text="下一步" :custom-style="{height: '84rpx'}" @click="next" :disabled="loading"></uv-button>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	.app-container{
		padding-bottom: 164rpx;
		.steps-box{
			padding-top: 24rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			gap: 40rpx;
			.steps-item{
				display: flex;
				flex-direction: column;
				align-items: center;
				gap: 8rpx;
				.item-img{
					width: 56rpx;
					height: 56rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					background-color: #E9EAEE;
					border-radius: 50%;
					&.active{
						background-color: $uv-primary;
					}
				}
			}
			.steps-line{
				width: 64rpx;
				height: 4rpx;
				background-color: #D7D8D9;
				&.active{
					background-color: $uv-primary;
				}
			}
		}
		.form-box{
			margin-top: 24rpx;
			background-color: #fff;
			padding: 0 32rpx;
			.custom-content{
				display: flex;
				justify-content: flex-end;
				gap: 10rpx;
			}
			.text-disable{
				color: #727687;
			}
			.text-no{
				color: #c0c4cc;
			}
			::v-deep .uv-form-item__body{
				padding: 32rpx 0;
			}
			::v-deep .uv-form-item__body__left__content__required{
				left: unset;
				right: -8rpx;
			}
			::v-deep .uv-form-item__body__left__content__label {
				font-size: var(--theme-df);
			}
			::v-deep .uv-input__content__field-wrapper__field {
				font-size: var(--theme-df) !important;
				line-height: var(--theme-df-line) !important;
			}
			::v-deep .uv-form-item__body__right__message{
				font-size: var(--theme-sm);
				line-height: var(--theme-sm-line);
			}
			::v-deep .uv-form-item__body__right__content{
				font-size: var(--theme-df) !important;
				line-height: var(--theme-df-line) !important;
			}
			.operate-box{
				width: 44rpx;
				height: 44rpx;
				border-radius: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: #E6E6E6;
				&.plus{
					background-color: $uv-primary;
				}
			}
		}
		.form-bottom{
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0rpx;
			z-index: 100;
			height: 132rpx;
			padding: 24rpx 40rpx;
			background-color: #FFFFFF;
			box-shadow: 0rpx -8rpx 8rpx 0rpx rgba(0,0,0,0.04);
			::v-deep .uv-button__text{
				font-size: var(--theme-lg) !important;
			}
		}
		&.large{
			.item-img{
				width: 64rpx;
				height: 64rpx;
			}
		}
	}
</style>